<!--
 	* @author  wangjinqiu
-->
<template>
  <div id="rush-statistics">
    <!--<el-collapse-transition>
      <div class="statistics-search merge">
        <span class="svg-container">
          <svg-icon icon-class="search"/>
        </span>
        <el-input v-model="listQuery.anyThing" clearable placeholder="按姓名／账号进行搜索查询" class="search-input"
                  @keyup.enter.native="handleFilter"/>
        <div class="statistics-search-btn">
          <el-button class="filter-item" type="primary" @click="handleFilter">{{ $t('table.search') }}</el-button>
        </div>
      </div>
    </el-collapse-transition>-->
    <div class="rush-classify">
      <el-menu
        :default-active="curClassify"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item v-for="(item,i) in classifyList" :key="i" :index="item.id">{{
          item.name
        }}</el-menu-item>
      </el-menu>
    </div>
    <div class="rush-table-data">
      <div class="filter-container btn-container">
        <div class="btn-container-title">
          <span>排行榜统计</span>
        </div>
      </div>
      <div class="table">
        <el-table
          key="tableTwo"
          v-loading="listLoading"
          :data="list"
          class="tableScope"
          style="width: 100%"
        >
          <el-table-column
            prop="rank"
            label="名次"
            align="center"
            width="100"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.rank == 1" class="svg-container medal">
                <svg-icon icon-class="gold-medal" />
              </span>
              <span v-if="scope.row.rank == 2" class="svg-container medal">
                <svg-icon icon-class="silver-medal" />
              </span>
              <span v-if="scope.row.rank == 3" class="svg-container medal">
                <svg-icon icon-class="copper-medal" />
              </span>
              <span v-if="scope.row.rank > 3" class="svg-container">
                {{ scope.row.rank }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            v-if="curClassify == 1"
            prop="realName"
            label="用户名"
            align="center"
            show-overflow-tooltip
          />
          <el-table-column
            v-else
            prop="region"
            label="地区"
            align="center"
            show-overflow-tooltip
          />
          <template v-if="curClassify == 1">
            <el-table-column
              :key="Math.random()"
              prop="clockNum"
              label="累计打卡天数"
              align="center"
              show-overflow-tooltip
            />
            <el-table-column
              :key="Math.random()"
              prop="studyLongStr"
              label="学习时长"
              align="center"
              show-overflow-tooltip
            />
          </template>
          <template v-if="curClassify == 2">
            <el-table-column
              :key="Math.random()"
              prop="clockNum"
              label="上榜人数"
              align="center"
              show-overflow-tooltip
            />
          </template>
          <template v-if="curClassify == 3">
            <el-table-column
              :key="Math.random()"
              prop="studyLongStr"
              label="人均学习时长"
              align="center"
              show-overflow-tooltip
            />
          </template>
        </el-table>
      </div>
      <div class="btn-pagion fix">
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="getList"
        />
      </div>
    </div>
  </div>
</template>

<script>
// import { monthRank, areaRank, allRank } from '@/api/hundredLearning/index'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
export default {
  name: 'PunchClockRank',
  components: { Pagination },
  data() {
    return {
      classifyList: [
        {
          name: '学习打卡月榜',
          id: '1'
        },
        {
          name: '地区学习排行',
          id: '2'
        },
        {
          name: '学习百日榜',
          id: '3'
        }
      ],
      curClassify: '1',
      curSubClassify: 1,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 10,
      listLoading: false,
      list: [],
      searchshow: true,
      search: {},
      checkArr: [],
      id: ''
    }
  },
  watch: {
    qyfilterText(val) {
      this.$refs.qytree.filter(val)
    }
  },
  created() {
    this.id = this.$route.query.id || ''
    // this.getList()
  },
  methods: {
    handleSelect(key, keyPath) {
      this.curClassify = key
      for (var i in this.search) {
        this.search[i] = ''
      }
      this.qyClickTree = []
      this.listQuery.page = 1
      this.getList()
    },
    handleExport() {
      var searchText = ''
      var searchObj = {
        activityid: this.id
      }
      for (var i in searchObj) {
        if (searchObj[i]) {
          searchText += i + '=' + searchObj[i] + '&'
        }
      }
      searchText = searchText.slice(0, searchText.length - 1)
      if (
        (this.curClassify == 2 && this.curSubClassify == 0) ||
        this.curClassify == 3 ||
        this.curClassify == 1
      ) {
        if (searchText.indexOf('orgId') != -1) {
          searchText = searchText.replace(/orgId/, 'companyId')
        }
      }
      if (this.curClassify == 1) {
        window.open(
          '/API-RUSH/admin/rushLevelRank/exportGlobal?compatibility=0&' +
            searchText
        )
      } else if (this.curClassify == 2) {
        window.open('/API-RUSH/admin/rushLevelRank/exportWeek?' + searchText)
      } else if (this.curClassify == 3 && this.curSubClassify == 0) {
        window.open(
          '/API-RUSH/admin/rushLevelRank/exportDepartmentActiveRate?' +
            searchText
        )
      }
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    resettingBtn() {
      this.qyClickTree = []
      for (const i in this.search) {
        this.search['' + i + ''] = ''
      }
      this.listQuery.page = 1
      this.getList()
    },
    getMonthRank(obj) {
      this.listLoading = true
      var query = {
        activityId: this.id,
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        monthRank(query)
          .then((response) => {
            this.list = response.data.data.rows
            this.total = response.data.data.total
            setTimeout(() => {
              this.listLoading = false
            }, 1 * 1000)
          })
          .catch((error) => {
            reject(error)
            setTimeout(() => {
              this.listLoading = false
            }, 1 * 1000)
          })
      })
    },
    getAreaRank(obj) {
      this.listLoading = true
      var query = {
        activityId: this.id,
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        areaRank(query)
          .then((response) => {
            this.list = response.data.data.rows
            this.total = response.data.data.total
            setTimeout(() => {
              this.listLoading = false
            }, 1 * 1000)
          })
          .catch((error) => {
            reject(error)
            setTimeout(() => {
              this.listLoading = false
            }, 1 * 1000)
          })
      })
    },
    getAllRank(obj) {
      this.listLoading = true
      var query = {
        activityId: this.id,
        page: obj ? obj.page : this.listQuery.page,
        pageSize: obj ? obj.limit : this.listQuery.limit
      }
      return new Promise((resolve, reject) => {
        allRank(query)
          .then((response) => {
            this.list = response.data.data.rows
            this.total = response.data.data.total
            setTimeout(() => {
              this.listLoading = false
            }, 1 * 1000)
          })
          .catch((error) => {
            reject(error)
            setTimeout(() => {
              this.listLoading = false
            }, 1 * 1000)
          })
      })
    },

    getList(obj) {
      if (this.curClassify == 1) {
        this.getMonthRank(obj)
      } else if (this.curClassify == 2) {
        this.getAreaRank(obj)
      } else if (this.curClassify == 3) {
        this.getAllRank()
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
$dark_gray: #bfced6;
$dark_main: #18a5fd;
$mainColor: #18a5fd;
#rush-statistics {
  padding: 0 20px;
  .medal {
    font-size: 18px;
  }
  .statistics-search {
    background-color: #fff;
    padding: 0 20px;
    .svg-container {
      padding: 0;
      color: $dark_gray;
      vertical-align: middle;
      display: inline-block;
      &_login {
        font-size: 20px;
      }
    }
    .search-input {
      width: 60%;
      position: relative;
      &:after {
        content: '';
        position: absolute;
        left: -25px;
        right: 0;
        bottom: 8px;
        height: 1px;
        background: rgba(226, 227, 232, 1);
      }
      input {
        outline: none;
        background: transparent;
        border: none;
        outline: medium;
        padding: 0;
        &:focus {
          outline: none;
          background-color: transparent;
        }
      }
    }
    .statistics-search-btn {
      display: inline-block;
      float: right;
      .el-button.is-round {
        padding: 10px 30px;
        margin-right: 34px;
      }
      .statistics-search-more {
        font-size: 14px;
        font-weight: 500;
        color: $dark_main;
        cursor: pointer;
        margin-left: 10px;
      }
    }
    &.merge {
      height: 50px;
      line-height: 50px;
    }
    &.separate {
      .statistics-search-inner {
        padding-top: 10px;
        .search-inner-item {
          .item-label {
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            color: #a6a6a6;
            font-weight: 400;
          }
          .el-input {
            position: relative;
            .el-input__inner {
              border: none;
              padding: 0;
            }
            &:after {
              content: '';
              height: 1px;
              background-color: #e2e3e8;
              position: absolute;
              left: 0;
              right: 0;
              bottom: 0;
            }
          }
        }
      }
      .statistics-search-btn {
        text-align: center;
        display: block;
        float: none;
        height: 56px;
        line-height: 56px;
      }
    }
  }
  .rush-classify {
    width: 100%;
    height: 64px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 400;
    color: rgba(166, 166, 166, 1);
    background-color: #fff;
    padding-left: 16px;
    .el-menu--horizontal {
      border-bottom: 0 none;
    }
    .el-submenu__icon-arrow.el-icon-arrow-down {
      display: inline-block !important;
    }
    span {
      color: #333333;
      cursor: pointer;
      padding: 10px 12px;
      &.active {
        padding: 10px 12px;
        background-color: #eaf7ff;
        color: $dark_main;
        border-radius: 30px;
      }
    }
  }
  .rush-table-data {
    margin-top: 20px;
    .screen-area {
      background-color: #fff;
      padding: 20px;
      .search-inner-item {
        margin-bottom: 10px;
        .item-label {
          margin-bottom: 5px;
          font-size: 14px;
          font-weight: 500;
          color: rgba(51, 51, 51, 1);
        }
        .to {
          font-size: 14px;
          color: #303133;
        }
        .el-date-editor .el-range-separator {
          width: 10%;
        }
        .el-range__close-icon {
          width: 17px;
        }
      }
      .screen-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
        .filter-item:last-child {
          margin-left: 28px;
        }
      }
      .select-data {
        display: inline-block;
        background: rgba(246, 246, 246, 1);
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        padding: 0 10px;
        margin-right: 5px;
        line-height: 36px;
        margin-bottom: 5px;
        i {
          cursor: pointer;
          padding-left: 5px;
        }
      }
      .selectbtn {
        display: inline-block;
        width: 120px;
        background: rgba(255, 255, 255, 1);
        border: 1px dotted $mainColor;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        color: $mainColor;
        text-align: center;
        cursor: pointer;
        line-height: 36px;
      }
    }
  }
  .btn-container {
    display: flex;
    height: 36px;
    line-height: 36px;
    margin-bottom: 10px;
    .btn-container-title {
      flex: 1;
      height: 36px;
      line-height: 36px;
      font-size: 16px;
      color: rgba(51, 51, 51, 1);
      font-weight: bold;
    }
    .btn-container-btns {
      span {
        display: inline-block;
        width: 98px;
        height: 36px;
        line-height: 36px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(229, 229, 229, 1);
        border-radius: 4px;
        font-size: 14px;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        text-align: center;
        cursor: pointer;
        &:last-child {
          margin-left: 20px;
        }
        &.active {
          border: 1px solid $dark_main;
          color: $dark_main;
        }
      }
    }
  }
  .custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
  }
  .el-tree {
    height: 300px;
    overflow-y: auto;
  }
  .el-checkbox__label {
    font-weight: 400;
  }
}
</style>
